<template>
  <div>
    <LayOutLogin form-title-name="账号绑定" :is-show-third-login="false">
      <template v-slot:form>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
          <FormItem prop="userName" class="form-item-name">
            <i-input
              type="text"
              style="width: 100%"
              placeholder="请输入姓名"
              v-model="formValidate.userName"
            >
            </i-input>
          </FormItem>
          <FormItem prop="userAccount" class="form-item-user">
            <i-input
              type="text"
              style="width: 100%"
              placeholder="请输入账号"
              v-model="formValidate.userAccount"
            >
            </i-input>
          </FormItem>
          <FormItem class="ivu-form-btn">
            <Button
              type="primary"
              :loading="loading"
              long
              style="background-color: #2878FF"
              @click="handleRegister('formValidate')">绑定
            </Button>
          </FormItem>
          <FormItem class="form-other-login">
            <span @click="handleAccountLogin()">返回登录</span>
          </FormItem>
        </Form>
      </template>
    </LayOutLogin>
  </div>
</template>

<script>
import { goLogin } from '../../router'
import { isAccount } from '../../utils/verification'
import { register } from '../../api/modules/user/user'
import message from '../../utils/message'

export default {
  name: 'Register',
  data () {
    return {
      formValidate: {
        userAccount: '',
        userName: '',
        thirdPartyId: '',
        userPassword: '111111',
        email: '',
        phone: ''
      },
      ruleValidate: {
        userName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        userAccount: [{ required: true, message: '账号不能为空', trigger: 'blur' }, {
          validator: (rule, value, callback) => {
            if (isAccount(value)) {
              callback()
            } else {
              callback(new Error('账户格式为长度4-15位数字字母的组合'))
            }
          },
          trigger: 'blur'
        }]
      },
      loading: false,
      imags: [require('@/assets/imgs/login/img.jpg'), require('@/assets/imgs/login/img1.jpg'), require('@/assets/imgs/login/img2.jpg'), require('@/assets/imgs/login/img3.jpg'), require('@/assets/imgs/login/img4.jpg'), require('@/assets/imgs/login/img5.jpg')]
    }
  },
  beforeRouteEnter (to, form, next) {
    // console.log(form)
    // 目前type为1表示钉钉绑定、2表示邮箱绑定、3表示手机绑定、4表示微信绑定
    const type = to.params.type
    const id = to.params.id
    switch (type) {
      case '1':
        next(vm => {
          vm.formValidate.thirdPartyId = id
        })
        break
      case '2':
        next(vm => {
          vm.formValidate.email = id
        })
        break
      case '3':
        next(vm => {
          vm.formValidate.phone = id
        })
        break
      case '4':
        next(vm => {
          vm.formValidate.thirdPartyId = id
        })
        break
      default:
        next({ path: '/' })
        break
    }
  },
  components: {
    LayOutLogin: () => import('@/views/login/LayOutLogin.vue')
  },
  methods: {
    handleAccountLogin () {
      goLogin()
    },
    /**
     * 点击注册触发
     */
    handleRegister (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.privateSubmit()
        } else {
          message.message.error('数据格式错误，请检查后重试')
        }
      })
    },
    /**
     * 提交
     */
    privateSubmit () {
      register(this.formValidate).then(res => {
        message.message.success(res.message + '即将为你跳转到登录页面', {}, () => {
          goLogin()
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../assets/styles/scss/mixin";
  /deep/ .ivu-input{
    border-radius: 0px;
    border:1px solid rgba(230,230,230,1);
    height: .5rem;
  }
  .ivu-form{
    margin-top: 1rem;
    /*margin-top: 6.48%;*/
  }
  .ivu-btn{
    border-radius: 0px;
    height: .5rem;
  }
  .ivu-form-item{
    margin-bottom: .4rem;
  }
  .form-item-other{
    /deep/ .ivu-form-item-content{
      line-height: 0;
      @include flexMixer(space-between);
      color: #B3B3B3;
    }
  }
  .ivu-form-btn{
    margin-bottom: 0px;
  }
  /deep/ .form-other-login{
    margin-bottom: 0;
    height: .5rem;
    cursor: pointer;
    /deep/ .ivu-form-item-content{
      height: 100%;
      width: 100%;
      @include flexMixer(space-between);
      color: #B3B3B3;
    }
  }
  /deep/ .form-item-password-item{
    .ivu-form-item-error-tip{
      font-size: 13px;
    }
  }
  .verification-model{
    /deep/ .ivu-modal-body{
      padding: 0 0 10px;
    }
    /deep/ .slide-verify-slider{
      width: 310px;
    }
  }
</style>
